<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container2" style="height: 100%"></div>
       <script type="text/javascript" src="../js/echarts.min.js"></script>
       <script type="text/javascript">
               var dom2 = document.getElementById("container2");
               let myChart2 = echarts.init(dom2);
               var app = {};
               option = null;
               option = {
                   title: {
                       text: '信用结构和变化历史',
                       subtext: '--示例--',
                       top: 10,
                       left: 10
                   },
                   tooltip: {
                       trigger: 'item',
                       backgroundColor : 'rgba(0,0,250,0.2)'
                   },
                   legend: {
                       type: 'scroll',
                       bottom: 10,
                       data: (function (){
                           var list = [];
                           for (var i = 1; i <=28; i++) {
                               list.push(i + 2000 + '');
                           }
                           return list;
                       })()
                   },
                   visualMap: {
                       top: 'middle',
                       right: 10,
                       color: ['red', 'yellow'],
                       calculable: true
                   },
                   radar: {
                       indicator : [
                           { text: '信用历史', max: 400},
                           { text: '行为偏好', max: 400},
                           { text: '履约能力', max: 400},
                           { text: '身份特质', max: 400},
                           { text: '社会关系', max: 400}
                       ]
                   },
                   series : (function (){
                       var series = [];
                       for (var i = 1; i <= 18; i++) {
                           series.push({
                               name:'浏览器（数据纯属虚构）',
                               type: 'radar',
                               symbol: 'none',
                               lineStyle: {
                                   width: 1
                               },
                               emphasis: {
                                   areaStyle: {
                                       color: 'rgba(0,250,0,0.3)'
                                   }
                               },
                               data:[
                                   {
                                       value:[
                                           (40 - i) * 10,
                                           (38 - i) * 4 + 60,
                                           i * 5 + 10,
                                           i * 9,
                                           i * i /2
                                       ],
                                       name: i + 2000 + ''
                                   }
                               ]
                           });
                       }
                       return series;
                   })()
               };;
               if (option && typeof option === "object") {
                   myChart2.setOption(option, true);
               }
               //根据窗口的大小变动图表 --- 重点
               $('#container2').resize(function () {
                   myChart2.resize();
               });

       </script>
   </body>

</html>